<template>
  <div>
      <div class="headline"><van-nav-bar
  title="首页"
/></div>
<p class="title">推荐歌单</p>
 <van-row gutter="6">
      <van-col span="8" v-for="obj in reList" :key="obj.id">
        <van-image width="100%" height="3rem" fit="cover" :src="obj.picUrl" />
        <p class="song_name">{{ obj.name }}</p>
      </van-col>
    </van-row>
<p class="title">最新音乐</p>
 <van-cell center v-for="obj in songList" :key="obj.id" :title="obj.name" :label="obj.song.artists[0].name + ' - ' + obj.name">
        <template #right-icon>
          <van-icon name="play-circle-o" size="0.6rem"/>
        </template>
    </van-cell>
  </div>
  
</template>

<script>
import { recommendMusicAPI,newMusicAPI } from "@/api";
export default {
data(){
  return{
    reList:[],
    songList: [], // 最新音乐数据
  }
},
async created(){
  const res=await recommendMusicAPI({
    limit:6
  })
  const res2=await newMusicAPI({
    limit:20
  })
  console.log(res);
  this.reList=res.data.result
  this.songList=res2.data.result

  console.log(this.songList);
}
}
</script>

<style scoped>
.song_name{
  overflow: hidden;
}
.title{
  padding: 10px;
  font-size: 14px;
}
p{
  font-size: 12px;
}
.liet-user{
  display: flex;
  padding: 10px;
  justify-content: space-between;
}
.zi{
  font-size: 18px;
}
</style>

